<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script>
        function ajouterLigneTableau () {
            var elementTableau = document.getElementById("tableau");
            
            var ligne = document.createElement("tr");
            
            var cellule1 = document.createElement("td");
            cellule1.innerHTML = "DURAND";
            
            var cellule2 = document.createElement("td");
            cellule2.innerHTML = "Sophie";
            
            var cellule3 = document.createElement("td");
            cellule3.innerHTML = "30/06/2001";
            
            
            ligne.appendChild(cellule1);
            ligne.appendChild(cellule2);
            ligne.appendChild(cellule3);
            
            elementTableau.appendChild(ligne);
        }
      
        </script>
        <style>
            body {
                font-family: Georgia;
                font-size: 12px;
            }
            table {
                margin: 25px;
                border: 2px #888 solid;
                border-collapse: collapse;
            }
            td, th {
                border: 1px #888 solid;
            }
        </style>
    </head>
    
    <body>
        <form name="form1" action="">
            <input type="button" value="Ajouter une ligne au tableau !" onclick="ajouterLigneTableau();">
        </form>
        <table id="tableau">
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date de naissance</th>
            </tr>
            <tr>
                <td>DUPONT</td>
                <td>Henri</td>
                <td>10/04/1990</td>
            </tr>
            <tr>
                <td>MARTIN</td>
                <td>Léonie</td>
                <td>27/09/2000</td>
            </tr>
            <tr>
                <td>BERNARD</td>
                <td>Pédro</td>
                <td>05/11/1998</td>
            </tr>
        </table>
    </body>
</html>
